<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/flexible.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/nav_2.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
		<title>登录</title>
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<span><</span>
			<span>聚名品</span>
			<span></span>
		</header>

		<!---->
		<div class="lists">
			<section class="box">
				<div class="swiper-container-list banner">
					<div class="swiper-wrapper nav-list">
						<div class="swiper-slide active">精选商品</div>
						<div class="swiper-slide">今日上新</div>
						<div class="swiper-slide">时尚志</div>
						<div class="swiper-slide">鞋履包箱</div>
					</div>
				</div>
				<div class="swiper-container-opts subject-list">
					<div class="swiper-wrapper ron">
						<div class="swiper-slide list_slide">
							<div class="re">
								<div><img src="../img/ju1.png" /></div>
								<div><img src="../img/ju2.png" /></div>
								<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
							</div>
						</div>
						<div class="swiper-slide list_slide">
							<h3 class="h3">今日上新</h3>
							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>

							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
						</div>
						<div class="swiper-slide list_slide">
							<h3 class="h3">鞋履包箱</h3>
							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
							
							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
							
							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
							
							
						</div>
						<div class="swiper-slide list_slide">
							<h3 class="h3">美妆护肤</h3>
							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
							
							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
							
							<div class="cont_box">
								<figure>
									<img src="../img/ju6.png" />
									<div class="con_list">
										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

										<div class="text">
											<img src="../img/ju3.png" />
											<p>￥ 85</p>
											<p>限量</p>
										</div>

									</div>
								</figure>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>

		<script src="../js/jquery-3.2.1.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script src="../js/template-web.js"></script>
		<script>
			$('.header :first-child').click(function(){
				location.href = "../index.html"
			})
			var Swiper_active1 = $('.swiper-container-list .active'),
				Swiper_slide1 = $('.swiper-container-list .swiper-slide');
			var _mySwiperlist = new Swiper('.swiper-container-list', {
				watchSlidesProgress: true,
				watchSlidesVisibility: true,
				slidesPerView: 4,
				onTap: function() {
					_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
				}
			})
			var _mySwiperopts = new Swiper('.swiper-container-opts', {
				onSlideChangeStart: function() {
					updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
				}
			})

			function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
				Swiper_active.removeClass('active')
				var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active');
				activeNav.siblings().removeClass("active");
				if(!activeNav.hasClass('swiper-slide-visible')) {
					if(activeNav.index() > mySwiper_list.activeIndex) {
						var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
						mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
					} else {
						mySwiper_list.slideTo(activeNav.index())
					}
				}
			}

			
		</script>
	</body>

</html>